import Button from '@/components/button'
import styles from './index.module.less'
import Input from '@/components/input'
import Forget from './forget'
import UpdatePwd from './pwd'
import { useSetState } from 'ahooks'
import { checkEmail } from '@/utils/utils'
import { login } from '@/api/user'
import { cncryptionCipher } from '@/utils/encode'
import { handleLocalUserInfo } from '@/utils/utils'
import { useEffect, useRef } from 'react'

const Index = () => {
  const submitRef = useRef()
  const [formInfo, setFormInfo] = useSetState({
    showForget: false,
    showUpdate: false,
  })
  const { setUserToken } = handleLocalUserInfo()
  const [updatePwdInfo, setUpdateInfo] = useSetState({})
  const submit = async () => {
    if (formInfo.showForget || formInfo.showUpdate) {
      return
    }
    const validEmail = checkEmail(formInfo.email)
    setFormInfo({ emailErr: !validEmail, pwdErr: !formInfo.pwd })
    if (!validEmail || !formInfo.pwd) {
      return
    }

    const res = await login({ email: formInfo.email, password: cncryptionCipher(formInfo.pwd) })
    if (!res.code) {
      setUserToken(res.data.token)
      window.location.replace('/market-center')
    } else {
      setFormInfo({ pwdErr: true })
    }
  }

  useEffect(() => {
    const down = (e) => {
      if (e.keyCode === 13) {
        submitRef.current.click()
      }
    }
    window.addEventListener('keydown', down)
    return () => {
      window.removeEventListener('keydown', down)
    }
  }, [])
  return (
    <>
      <div className={styles.enter}>
        <p className={styles.title}>
          <span>星船营销登录!</span>
          <img src="/images/yes.webp" />
        </p>
        <p className={styles.inputLabel}>
          <span>邮箱</span>
          {(formInfo.emailErr || formInfo.pwdErr) && <span>邮箱或密码有误，请重新输入</span>}
        </p>
        <Input
          height={60}
          inputClass="input"
          placeholder="请输入邮箱"
          onChange={(e) => setFormInfo({ email: e.target.value })}
        />
        <p className={styles.inputLabel}>
          <span>密码</span>
        </p>
        <Input
          height={60}
          inputClass="input"
          placeholder="请输入密码"
          onChange={(e) => setFormInfo({ pwd: e.target.value })}
          hasSuffix
        />
        <p className={styles.forget}>
          <span onClick={() => setFormInfo({ showForget: true })}>忘记密码？</span>
        </p>
        <Button onClick={submit} className={styles.submit} ref={submitRef}>
          登录
        </Button>
      </div>
      {formInfo.showForget && (
        <Forget
          formInfo={updatePwdInfo}
          setFormInfo={setUpdateInfo}
          visible={formInfo.showForget}
          onConfirm={() => setFormInfo({ showForget: false, showUpdate: true })}
          close={() => setFormInfo({ showForget: false })}
        />
      )}
      {formInfo.showUpdate && (
        <UpdatePwd
          formInfo={updatePwdInfo}
          setFormInfo={setUpdateInfo}
          visible={formInfo.showUpdate}
          close={() => setFormInfo({ showUpdate: false })}
        />
      )}
    </>
  )
}

export default Index
